<template>
  <view class="category">
    <v-nav-bar :nav-bar="navBar" :category="category" />
    <v-first-category :list="category.firstLevel" @handleFirst="handleFirst" />
    <v-left :nav-bar="navBar" :list="category.firstChildren" :selected="selected" @selectItem="selectItem" :show-nothing="showNothing" />
    <v-right :nav-bar="navBar" :list="productList" @handleOder="handleOder" :show-nothing="showNothing" />
  </view>
</template>

<script>
import NavBar from '../components/category/NavBar'
import FirstCategory from '../components/category/FirstCategory'
import Left from '../components/category/Left'
import Right from '../components/category/Right'

import ProductModel from '../../../api/product'
import base64 from '../../../util/base64'
const productModel = new ProductModel()

import { isAppPlatform, navTabHeight } from '../../../util/platform'

export default {
  props: ['refresh', 'tab'],
  components: {
    'v-first-category': FirstCategory,
    'v-left': Left,
    'v-right': Right,
    'v-nav-bar': NavBar,
  },
  data() {
    return {
      // 状态栏与导航栏高度
      navBar: {},
      // 数据
      category: {
        firstLevel: [],
        firstChildren: [],
      },
      // 选中
      selected: {},
      // 商品
      productList: [],
      showNothing: false
    }
  },
  watch: {
    refresh: {
      handler(newTime, oldTime) {
        // console.log(oldTime, newTime, newTime - oldTime)
        if (newTime - oldTime > 1 * 1000 && this.tab.url === '/pages/category/index') {
          this.$store.dispatch('Uni/set_category', null).then(() => {})
          this.fetch()
        }
      }
    }
  },
  methods: {
    fetch() {
      /*
        这里使用vuex解决重复请求问题, 最大的缓存为24小时
        同时app缓存有中文乱码问题, 这里不做缓存
       */
      // const isApp = isAppPlatform()
      // const cache = this.$store.getters['Page/category']
      // if (!cache || isApp) {
      //   productModel.categoryPage().then(response => {
      //     let { data } = response
      //     data = base64.parse(data)
      //     this.$store.dispatch('Page/set_category', data).then(() => {
      //       this.category = data
      //     })
      //   })
      // } else {
      //   this.category = cache
      // }
      // todo 没有使用缓存
      const cache = this.$store.getters['Uni/category']
      if (!cache || true) {
        this.showNothing = false
        productModel.categoryPage().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Uni/set_category', data).then(() => {
            this.category = data
            this._defaultSelected()
          })
        }).finally(() => {
          this.showNothing = true
        })
      } else {
        this.category = cache
        this._defaultSelected()
      }
    },
    // 默认选择
    _defaultSelected() {
      if (this.category.firstChildren && this.category.firstChildren.length > 0) {
        // 选中
        // this.selected = this.category.firstChildren[0]
        // 对应商品
        // this.getProduct(this.selected.id)
        this.selectItem(this.category.firstChildren[0])
      }
    },
    // 左侧选中
    selectItem(item) {
      this.selected = item
      this.getProduct(item.id)
    },
    // 获取商品
    getProduct(category_id, order = []) {
      this.showNothing = false
      productModel.getTwoProduct({ id: category_id, order }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.productList = data.list
        // console.log(data)
      }).finally(() => {
        this.showNothing = true
      })
    },
    // 选择一级分类
    handleFirst(item) {
      this.productList = []
      this.$set(this.category, 'firstChildren', [])
      this.showNothing = false
      productModel.getSecond({ id: item.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.$set(this.category, 'firstChildren', data.list)
        this._defaultSelected()
      }).finally(() => {
        this.showNothing = true
      })
    },
    // 商品排序
    handleOder(order) {
      // console.log(order)
      this.productList = []
      // 当前选中的二级分类
      const selected = this.selected
      this.getProduct(selected.id, order)
    }
  },
  created() {
    // 设置导航高度
    this.navBar = navTabHeight()
    // 获取数据
    if (this.category.firstLevel.length === 0) {
      this.fetch()
    }
  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
.category {

}
</style>
